<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<style>
    .layui-form-item .layui-input-inline {
        width: 190px;
        margin: 0 0 10px 80px;
    }
</style>
<body>
<form class="layui-form " action="">
    <div class="layui-form-item">
        <label class="layui-form-label">书名:</label>
        <div class="layui-input-inline">
            <input type="text" name="bookName" required lay-verify="required" placeholder="请输入想看的书名(必填)"
                   autofocus="autofocus" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">出版社:</label>
        <div class="layui-input-inline">
            <input type="text" name="press" lay-verify="" placeholder="出版社" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">作者:</label>
        <div class="layui-input-inline">
            <input type="text" name="author" lay-verify="" placeholder="作者" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item layui-form-text">
        <label class="layui-form-label">理由:</label>
        <div class="layui-input-inline">
            <textarea name="content" placeholder="请认真填写想看的理由,以便更多人被你感动" class="layui-textarea"></textarea>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

    <!--<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br th:each="booklog: ${booklogDOList}"><span>您的这本书:《</span><span th:text="${booklog.redundance2}">西游记</span><span>》还有</span><span th:text="${booklog.redundance1}">3</span><span>天就到期了，请尽快归还</span><br><br>我们此后的征途是星辰大海 ^_^</div>-->
<!--弹出层-->
<div class="site-demo-button" id="layerDemo" style="margin-bottom: 0;">
    <button data-method="notice" class="layui-btn">示范一个公告层</button>
</div>
<!---->


<div th:include="include::footer"></div>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
    });

</script>
<script>

    layui.use('layer', function () { //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句

        //触发事件
        var active = {
            notice: function () {
                //示范一个公告层
                layer.open({
                    type: 1
                    ,
                    title: false //不显示标题栏
                    ,
                    closeBtn: false
                    ,
                    area: '300px;'
                    ,
                    shade: 0.8
                    ,
                    id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,
                    btn: ['火速围观', '残忍拒绝']
                    ,
                    btnAlign: 'c'
                    ,
                    moveType: 1 //拖拽模式，0或者1
                    ,
                    content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">你知道吗？亲！<br th:each="booklog: ${booklogDOList}"><span>您的这本书:《</span><span th:text="${booklog.redundance2}">西游记</span><span>》还有</span><span th:text="${booklog.redundance1}">3</span><span>天就到期了，请尽快归还</span><br><br>我们此后的征途是星辰大海 ^_^</div>'
                    ,
                    success: function (layero) {
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: 'http://www.layui.com/'
                            , target: '_blank'
                        });
                    }
                });
            }
        };
        $('#layerDemo .layui-btn').on('click', function () {
            var othis = $('#layerDemo .layui-btn'), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });

    });


    var webSocket = null;
    if (!"WebSocket" in window) {
        layer.msg("您的浏览器暂不支持webSocket!")
    }
    webSocket = new WebSocket("ws://127.0.0.1:82/webSocket")

    webSocket.onopen = function (ev) {
        webSocket.send("你好！")
        console.log("socket connect successfully!")
    }

    webSocket.onmessage = function (ev) {

        var othis = $(this), method = othis.data('method');
        active[method] ? active[method].call(this, othis) : '';

        layui.layer.msg("有消息啦{}", ev.data);
    }

    webSocket.onclose = function (ev) {
        console.log("socket miss a connection!")
    }

    webSocket.onerror = function (ev) {
        layer.msg("连接出异常!")
    }

    window.onbeforeunload = function (ev) {
        webSocket.close();
    }


</script>
</body>
</html>